<template>
	<view>
		<view :class="['drawer', { 'drawer-mask': !isVisible }]" @click="handleMask"></view>
		<view :class="['drawer-list', { 'drawer-open': isVisible }]">
			<view class="drawer-scroll" :style="{'padding-top':`${top}px`}">
				<view v-for="(item,index) in dishdata" :key="index" :id="'test' + index" @click="handleGoId('test' + index)">
					{{item[0]}}
				</view>
			</view>
			<view class="drawer-classify" @click="handleDrawer">
				<image src="../static/ic_classification@2x.png"></image>
				<view>分类</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			dishdata:{
				type:Array,
				default:()=>[]
			}
		},
		data() {
			return {
				top:null,
				isVisible: false
			};
		},
		created() {
			let mobile= uni.getSystemInfoSync()
			this.top=mobile.windowTop
		},
		methods: {
			handleGoId(id) {
				console.log(id, '选中的节点');
				this.$emit('on-click', id);
			},
			handleDrawer() {
				this.isVisible = !this.isVisible;
			},
			handleMask() {
				this.isVisible = false;
			}
		}
	};
</script>

<style lang="scss">
	.drawer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
		transition: all 0.3s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.drawer-mask {
		z-index: -1;
		background-color: rgba(0, 0, 0, 0);
	}

	.drawer-open {
		transform: translateX(0) !important;
	}

	.drawer-list {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 200rpx;
		height: 100vh;
		background-color: #fff;
		transition: all 0.3s;
		transform: translateX(-100%);

		.drawer-scroll {
			// padding-top: 80rpx;
			height: 100vh;
			overflow-y: auto;

			&>view {
				image {
					width: 35rpx;
					height: 35rpx;
					padding-right: 8rpx;
				}

				display: flex;
				position: relative;
				margin: 40rpx 20rpx;

				&::before {
					content: '';
					position: absolute;
					left: -20rpx;
					top: 0;
					width: 6rpx;
					height: 100%;
				}

				&:hover::before {
					background-color: red;
				}
			}
		}
	}

	.drawer-classify {
		z-index: -1;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		right: -60rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 0rpx 15rpx 0rpx 0rpx !important;
		text-align: right;

		image {
			width: 38rpx;
			height: 30rpx;
			padding-top: 32rpx;
		}

		view {
			font-size: 23rpx;
		}
	}
</style>
